<template>
  <div class="fixed top-0 left-0 w-screen h-screen text-xl z-20 backdrop-blur-4xl bg-transparent pb-2 overflow-y-auto
   xl:p-2">
    <!--    移动端的navbar -->
    <mine-navbar v-if="isMobileTerminal" sticky>{{ pexelData.title }}
      <template #right>
        <mine-svg-icon name="share" class="w-3 h-3" fillClass="fill-zinc-900 dark:fill-zinc-200"></mine-svg-icon>
      </template>
    </mine-navbar>
    <!--    PC端-->
    <mine-svg-icon v-else name="close"
                   class="w-3 h-3 ml-1 p-0.5 cursor-pointer duration-200 rounded-sm hover:bg-zinc-100
                   absolute right-2 top-2" fillClass="fill-zinc-400" @click="onPop">
    </mine-svg-icon>
    <!--    内容区-->
    <div v-if="pexelData.title" class="xl:w-[80%] xl:h-full xl:mx-auto xl:rounded-xl xl:flex">
      <img class="w-screen mb-2 xl:w-3/5 xl:h-full xl:rounded-tl-lg xl:rounded-bl-lg" :src="pexelData.photo" alt="">
      <div class="xl:w-2/5 xl:h-full xl:bg-white xl:dark:bg-zinc-900 xl:rounded-tr-lg xl:rounded-tb-lg xl:p-3">
        <!--        PC下的收藏、分享-->
        <div v-if="!isMobileTerminal" class="flex justify-between mb-2">
          <!--          分享-->
          <mine-svg-icon name="share"
                         class="w-4 h-4 p-1 cursor-pointer hover:bg-zinc-200 dark:bg-zinc-800 duration-300 rounded">
          </mine-svg-icon>
          <!--          收藏-->
          <mine-button type="info" icon="heart" iconClass="fill-zinc-900 dark:fill-zinc-200"></mine-button>
        </div>
        <!--        标题-->
        <p class="text-base text-zinc-900 dark:text-zinc-200 ml-1 font-bold xl:text-xl xl:mb-5">
          {{ pexelData.title }}</p>
        <div class=" flex items-center px-1 ">
          <img v-lazy class="h-3 w-3 rounded-full" :src="pexelData.avatar">
          <span class="text-base text-zinc-900 dark:text-zinc-200 ml-1 ">{{ pexelData.author }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {isMobileTerminal} from "@/utils/flexible";
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps({
  id: {
    type: String,
    required: true
  }
})
const pexelData = ref({})
const getPexelData = () => {
  pexelData.value =
      {
        "tags": ["all", "home", "desire", "pets"],
        "_id": "62208123fb7e8b6da85b7dfe",
        "photoLink": "https://www.pexels.com/zh-cn/photo/8051987/",
        "photo": "https://images.pexels.com/photos/8051987/pexels-photo-8051987.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
        "authorLike": "https://www.pexels.com/zh-cn/@ugurcan-ozmen-61083217",
        "avatar": "https://images.pexels.com/users/avatars/61083217/ugurcan-ozmen-235.jpeg?auto=compress&fit=crop&h=60&w=60",
        "author": "Uğurcan Özmen",
        "photoDownLink": "https://www.pexels.com/photo/8051987/download/",
        "id": "8051987",
        "title": "图片数据来自 pexels ",
        "photoWidth": 500,
        "photoHeight": 625,
        "photoType": "jpg",
        "__v": 0
      }
}
getPexelData()
const onPop = () => {
  //移动端下跳转的类型
  store.commit('app/changeRouterType', 'back')
  router.back()
}

</script>
